<template>
  <div class="service-more">
    <van-nav-bar title="保洁" />
    <van-collapse v-model="activeNames" accordion>
      <van-collapse-item title="如何取消保洁订单？" name="1">{{
        list[0]
      }}</van-collapse-item>
      <van-collapse-item title="取消保洁订单会扣款吗？" name="2">{{
        list[1]
      }}</van-collapse-item>
      <van-collapse-item title="如何确定服务地址是否有服务覆盖？" name="3">{{
        list[2]
      }}</van-collapse-item>
    </van-collapse>
    <van-cell class="problem">
      <div class="problem-b">没有找到相关问题?</div>
    </van-cell>
    <van-cell class="problem-btn">
      <van-button icon="service-o">在线客服</van-button>
      <van-button icon="phone-o" @click="showNumber = true"
        >客服电话
      </van-button>
    </van-cell>
    <van-popup
      v-model="showNumber"
      closeable
      close-icon="phone-o"
      close-icon-position="top-left"
      position="bottom"
    >
      <van-cell class="footSpace">呼叫 15273494739</van-cell>
      <van-cell class="footSpace" @click="showNumber = false">取消</van-cell>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "serviceMore",
  data() {
    return {
      activeNames: "",
      showNumber: false,
      xgfPhone: 15273494739,
      list: [
        "1) 用户自身原因取消:订单服务开始前，可通过“天鹅到家APP-我的-我的订单-不需要服务的订单-点击取消”即可。已过服务时间的订单需联系客服进行取消。2) 因服务者或其他不可抗力原因取消：可联系客服取消订单",
        " 保洁订单在预约成功1小时内取消，均不扣费，预付款会原路退回支付账户",
        " 您可以登录天鹅到家APP或者微信小程序：天鹅到家保洁：定位到所需服务的城市，然后选择所需的服务项，点击立即预约，输入服务地址，如果没有该项服务覆盖，系统会提升：当前地址暂未开通服务。"
      ]
    };
  },
  created() {},
  mounted() {},
  methods: {}
};
</script>

<style scoped lang="less">
* {
  box-sizing: border-box;
}
.service-more {
  .van-popup {
    background-color: unset;
    padding: 0 10px;
    /deep/.van-icon {
      top: 7px;
      left: 53px;
      font-size: 30px;
    }
  }

  height: 100%;
  background-color: #ededed;
  /deep/.van-nav-bar__title {
    font-weight: 600;
  }
  .van-cell {
    height: 45px;
    padding: 10px;
    .van-cell__title {
      padding-top: 1px;
    }
  }
  .problem {
    padding-bottom: 0px;
    .problem-b {
      border-bottom: 1px solid #888;
      height: 100%;
    }
  }
  /deep/.problem-btn {
    padding: 0;
    height: 60px;
    padding: 13px 10px 0 10px;
    .van-cell__value {
      display: flex;
      justify-content: space-between !important;
    }
    .van-button--normal {
      height: 38px;
      width: 175px;
      border: 1px solid #777;
      border-radius: 5px;
      .van-icon {
        font-size: 23px;
        margin-right: 7px;
      }
    }
  }
  .footSpace {
    .van-cell__value {
      color: blue;
      text-align: center;
      font-size: 20px;
    }
    margin-bottom: 10px;
    border-radius: 10px;
  }
}
</style>
